<html>

<head>
    <meta charset="utf-8" />
    <title>heishenhua</title>


    <script>
        function generateTable(data) {
            let table = '<table>';
            table += '<tr><th>Name</th><th>price</th></tr>';
            data.forEach(item => {
                table += `<tr><td>${item.name}</td><td>${item.price}</td></tr>`;
            });
            table += '</table>';
            return table;
        }
        function search() {

            keyI = document.getElementById("key");
            key = keyI.value;
            var xhr = new XMLHttpRequest();

            xhr.open("GET", "http://localhost:8080/myapp/products_service.json", true);


            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {

                    var fact = xhr.responseText;
                    data = JSON.parse(fact)
                    tableContainer = document.getElementById('table-container');
                    tableContainer.innerHTML = generateTable(data);

                }
            }
            xhr.send();
            //http://localhost:8080/myapp/factorial_service.jsp,拿到结果




        }
    </script>
</head>

<body>

    <input type="text" name="key" id="key">
    <input type="button" value="搜索商品" onclick="search()" />

    <div id="table-container"></div>
</body>

</html>